<template>
  <div ref="mapRef" :style="{ height: height, width: width }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted} from 'vue';

// 定义 Props
const props = defineProps({
  height: {
    type: String,
    default: '100%',
  },
  width: {
    type: String,
    default: '100%',
  },
  config: {
    type: Object,
    default: () => ({
      basemaps: [
        { name: '天地图', type: 'tdt', layer: 'img_d', show: true },
      ],
      // 其他默认配置
    }),
  },
});

// 定义事件
const emit = defineEmits(['map-ready']);

// 定义暴露给父组件的方法
const mapRef = ref(null);
let mapView: any = null;

// 初始化地图
onMounted(() => {
  if (mapRef.value) {
    mapView = new mars3d.Map(mapRef.value, props.config);
    mapRef.value.mapView = mapView;

    // 触发地图加载完成事件
    emit('map-ready', mapView);
  }
});

// 监听配置变化，动态更新地图
watch(() => props.config, (newConfig) => {
  if (mapView) {
    // 更新地图配置
    mapView.config = newConfig;
  }
}, { deep: true });

// 组件销毁时清理地图实例
onUnmounted(() => {
  if (mapView) {
    mapView.destroy(); // 调用 mars3d 地图的 destroy 方法
    mapView = null;
  }
});

// 暴露地图实例给父组件
defineExpose({
  mapView,
});
</script>

<style scoped lang="scss">
/* 样式部分可以根据需要添加 */
</style>